<template>
  <div>
       <!-- ==2 -->
          <div class="wsy-drop">
              <div class="wsy-droplis">
                  <template v-for="(ins1,v1) in goods">
                      <div :key="v1" class="wsy-drop">
                        <div class="wsy-drop-top">
                            <span class="wsy-dian1"><i :class="{'dian1-con':!warrBol[v1].bg}"></i>{{ins1.ng}}</span>
                            <span class="wsy-dian2">{{ins1.ng1}}</span>
                            <span class="wsy-dian2">{{ins1.ng2}}</span>
                            <span class="wsy-dian2">{{ins1.ng3}}</span>
                            <span class="wsy-dian2">{{ins1.ng4}}</span>
                            <span class="wsy-dian2 "></span>
                        </div>
                        <div class="drop-list">
                            <template v-for="(ins2,v2) in ins1.list">
                                <div :key="v2" class="drop-listo">
                                    <div>
                                        <div class="drop-lis">
                                            <i :class="{'list-icon':warrBol[v1].bg2[v2]}"></i>
                                            <div class="lisImg">
                                                <img src="../../../assets/imgs/树莓.png" alt="图片">
                                            </div>
                                            {{ins2.ngs}}
                                        </div>
                                        <div class="drop-lis1">{{ins2.gu1}}</div>
                                        <div class="drop-lis1">￥{{ins2.gu2}}</div>
                                        <div class="drop-lis1 drop-move">
                                            <span>
                                                <i ></i>
                                                <i>{{ins2.gu3}}</i>
                                                <i></i>
                                            </span>
                                        </div>
                                        <div class="drop-lis1">￥{{ins2.gu5}}</div>
                                        <div  class="drop-lis1 nonw">{{ins2.gu4}}</div>
                                    </div>
                                </div>
                            </template>
                            <div class="drop-listo2 clearfix">
                                <div>
                                <div>运费:<span>￥{{tot1}}</span></div>
                                <div>商品金额：<span>￥{{ins1.tot}}</span></div>
                                <div>商家合计：<span>￥{{tot2}}</span></div>
                                </div>
                            </div>
                        </div>
                        <!-- 写内容的地方 -->
                        <slot></slot>
                      </div>
                  </template>
              </div>
          </div>
        <AddTimer/>
          <!-- 总提交 -->
          <div class="shopMoney w">
              <div class="smOne">实付金额：<span>￥2977</span></div>
              <div class="smTwo">订单完成后可获得积分：<span>300积分</span></div>
              <div class="smThree"> <span  @click="chang()">提交订单</span></div>
          </div>
          
          
  </div>
</template>

<script>
import AddTimer from './AddTimer';
export default {
    name:'ShopCont',
    data(){
        return{
            tot1:5,
            tot2:180,
            bol:true,
            zong:0,
            warrBol:[],
            warrGo:true,
            goods:this.$store.state.wly[0].goods1,
            flag:0,
        }
    },
    components:{
        AddTimer,
    },
    beforeMount(){
        this.shoping();
        this.da();
    },
    mounted(){
        this.arrtot();
    },
    methods:{
        chang(){
            console.log('aa');
        },
        wBuy1(){
            this.$router.replace('/shoptwo');
        },
        goBack(){
            this.$router.replace('/');
        },
        wSchang(v1){
            console.log(v1);
            this.ads=v1;
        },
        wsGo(){
            // console.log('去首页');
            this.$router.replace('/');
        },
        shoping(){
            if(this.goods==[]){
                this.bol=true;
            }else if(this.goods!=[]){
                this.bol=false;
            }
        },
        // 减
        wgo(v1,v2){
            // console.log(v1,v2,'减');
            this.goods[v1].list[v2].gu3--;
            if(this.goods[v1].list[v2].gu3<1){
                this.goods[v1].list[v2].gu3=1;
            }
            this.arrtot();
            this.bian(v1,v2);
        },
        // 加
        wto(v1,v2){
            // console.log(v1,v2,'加');
            console.log(this.goods[v1].list[v2].gu3);
            this.goods[v1].list[v2].gu3++;
            this.arrtot();
            this.bian(v1,v2);
        },
        da(){
            this.warrBol=[];
            for(var i=0;i<this.goods.length;i++){
                this.warrBol.push({'bg':false,'bg2':[]});
                for(var b=0;b<this.goods[i].list.length;b++){
                    this.warrBol[i].bg2.push(false);
                }
            }
        },
        // 单个店铺全选
        wChan(v1,v2){
            let monTot=0;
            this.warrBol[v1].bg=!this.warrBol[v1].bg;
            for(var i=0;i<this.warrBol[v1].bg2.length;i++){
                this.$set(this.warrBol[v1].bg2,i,this.warrBol[v1].bg);
            }
            this.bian(v1,v2);
            if(this.warrBol[v1].bg==false){
                this.goods[v1].tot=0;
            }
        },
        // 单个店铺单行总价
        arrtot(){
            for(var i=0 ;i<this.goods.length;i++){
                for(var b=0;b<this.goods[i].list.length;b++){
                    this.goods[i].list[b].gu5= this.goods[i].list[b].gu2*this.goods[i].list[b].gu3;
                }
            }
            console.log('ss');
        },
        // 单个店铺总价
        bian(v1,v2){
            let num=0;
            let money=0;
            let monTot=0;
            for(var i=0;i<this.warrBol[v1].bg2.length;i++){
                if(this.warrBol[v1].bg2[i]==true){
                    num++;
                    money += this.goods[v1].list[i].gu5;
                    this.goods[v1].tot=money;
                }
            }
             for(var b=0;b<this.goods.length;b++){
                monTot+=this.goods[b].tot;
                this.zong=monTot;
            }
            // console.log(monTot,'你');
        },
        // 全选
        wChan1(v1,v2){
            let num=0;
            this.$set(this.warrBol[v1].bg2,v2,!this.warrBol[v1].bg2[v2]);
            for(var i=0;i<this.warrBol[v1].bg2.length;i++){
                if(this.warrBol[v1].bg2[i]==true){
                    num++;
                    this.bian(v1,v2);
                }
            }
            // 一个店的全选
            if(num==this.warrBol[v1].bg2.length){
                this.warrBol[v1].bg=true;
                // console.log('全选');
            }else{
                this.warrBol[v1].bg=false;
                this.bian(v1,v2);
                // console.log('不全选');
                this.goods[v1].tot=0;
            }
            this.bian(v1,v2);
        },
        // 删除1
        delet(v1,v2){
            // 删除数据
            this.$delete(this.goods[v1].list,v2);
            // 删除选框
            this.$delete(this.warrBol[v1].bg2,v2);

            if(this.goods[v1].list.length<1){
                // 删除数据bol
                this.$delete(this.goods,v1);
                // 删除选框bol
                this.$delete(this.warrBol,v1);
                if(this.goods==0){
                this.bol=true;
                }else if(this.goods.length!=0){
                    this.bol=false;
                }
                console.log(this.goods.length);
            }
            this.arrtot();
            this.bian(v1,v2);

            
        },
        // 批量删除
        deletAll(){
            // 删除选中的
            var lis=this.warrBol;
            let num=0;
            for(var i=0;i<lis.length;i++){
                if(this.warrBol[i].bg==true){
                    this.$delete(this.goods,i);
                    this.$delete(this.warrBol,i);
                }else{
                    for(var b=0;b<lis[i].bg2.length;b++){
                        if(lis[i].bg2[b]==true){
                            this.$delete(this.goods[i].list,b);
                            this.$delete(this.warrBol[i].bg2,b);
                            if(this.goods[i].list.length<1){
                                // 删除数据bol
                                this.$delete(this.goods,i);
                                // 删除选框bol
                                this.$delete(this.warrBol,i);
                            }
                            // console.log(this.goods[i].list[i]);
                        }
                    }
                }
            }
            if(this.goods==0){
                this.bol=true;
            }else if(this.goods.length!=0){
                this.bol=false;
            }
            console.log(this.goods.length);
        },
        // 全选值的改变
        chanAll(bol){
            var lis=this.warrBol;
            for(var i=0;i<lis.length;i++){
                this.warrBol[i].bg=bol;
                for(var b=0;b<lis[i].bg2.length;b++){
                    this.$set(this.warrBol[i].bg2,b,bol);  
                }
            }
        },
        // 全选前的值变化
        num(bb){
            var lis=this.warrBol;
            let num=bb;
            for(var i=0;i<lis.length;i++){
                if(this.warrBol[i].bg==false){
                    num++;
                }
            }
            return num;
        },
        // 全选
        changAll(){
            this.num(0);
            let num=this.num(0);
            // console.log(num);
                if(num>=1){
                    this.chanAll(true);
                }else{
                    this.chanAll(false);
                }
        },
        // 总价
    }

}
</script>

<style scoped>
/* 总价 */
.shopMoney{
    padding-top: 14px;
    text-align: right;
}
.shopMoney .smOne{
    color: #666;
    font-size: 18px;
    line-height: 50px;
}
.smOne span{
color: #ff5757;
font-size: 24px;
}
.shopMoney .smTwo{
    font-size: 16px;
    color: #333;
    line-height: 50px;
}
.smTwo span{
    color: #f08200;

}
.shopMoney .smThree{
  margin: 24px 0 40px;
}
.shopMoney .smThree span{
    display: inline-block;
    font-size: 20px;
    background-color: #f08200;
    color: #fff;
    line-height: 50px;
    padding: 0 34px;
    border-radius: 6px;
}
/* public */
.w{
    width: 1280px;
    margin: 0 auto;
}
.wb{
    width: 100%;
   border-bottom: 1px solid #ddd;
}
/* 有商品 */
/* ==3 */
.wDel{
    width: 1280px;
    max-width: 1280px;
    margin: 20px auto 35px;
}
.wDtot{
    line-height: 54px;
     color: #498e3d;
    font-size: 14px;
    padding-left: 20px;
    float: left;
    cursor: pointer;
}
.wDtot span:nth-of-type(1){
    padding-right: 44px;
}
.wDcont{
    float: right;
    font-size: 18px;
    color: #666;
    display: flex;
}
.wDcont div:nth-of-type(1) span{
    font-size: 24px;
    color: #ff5757;
    margin-right: 30px;
    line-height: 54px;
   
}
.wDcont div:nth-of-type(2) {
    margin-top: 1px;
    font-size: 20px;
    color: #fff;
    line-height: 50px;
    height: 50px;
    width: 150px;
    border-radius: 6px;
    background-color: #f08200;
   
}

/* ==1 */
.wShopyes{
    width: 100%;
}
.wsy-top{
    line-height: 58px;
    font-size: 18px;
    color: #666;
    text-align: left;
}
.wsy-top span i{
    display: inline-block;
    height: 20px;
    width: 22px;
    background: url(../../../assets/imgs/goche1.png) no-repeat 0 0 ;
    margin-right: 15px;
    position: relative;
    top: 1px;
}
/* ==2 */
.wsy-drop{
    /* width: 100%; */
    width: 1278px;
    margin: 0 auto 20px;
    /* border: solid 1px #ddd; */
}
.wsy-drop-top{
    height: 46px;
    line-height: 46px;
    background-color: #f2f2f2;
    text-align: left;
    border-top: 1px solid #e9e9e9;
    border-left: 1px solid #e9e9e9;
    border-right: 1px solid #e9e9e9;
}
.wsy-drop-top .wsy-dian1{
    display: inline-block;
    width: 314px;
    padding-left: 56px;
    position: relative;
}
.wsy-dian1 i{
    position: absolute;
    top: calc(50% - 8px);
    left: 20px;
    height: 16px;
    width: 16px;
    background: url(../../../assets/imgs/w-fdui.png) no-repeat 0 0;
    opacity: 0;
}
.wsy-dian1 i.dian1-con{
    background: url(../../../assets/imgs/w-fdui.png) no-repeat 0 -24px;
    opacity: 0;
}
.wsy-drop-top .wsy-dian2{
    display: inline-block;
    width: 180px;
    text-align: center;
}
.wsy-drop-top .wsy-cao{
    display: inline-block;
    width: 90px;
}
.drop-list{
     width: 1278px;
     margin: 0 auto;
}
.drop-listo>div {
    display: flex;
    height: 120px;
    line-height: 120px;
    border-bottom: 1px solid #e9e9e9;
    border-left: 1px solid #e9e9e9;
    border-right: 1px solid #e9e9e9;
}
.drop-listo .drop-lis{
    padding-left: 156px;
    width: 220px;
    position: relative;
    color: #666;
    font-size: 14px;
}
.drop-lis i{
    opacity: 0;
    position: absolute;
    top: calc(50% - 8px);
    left: 20px;
    height: 16px;
    width: 16px;
    background: url(../../../assets/imgs/w-fdui.png) no-repeat 0 -24px;
    /* background: url(../../assets/imgs/w-fdui.png) no-repeat 0 0; */
}
.drop-lis i.list-icon{
    background: url(../../../assets/imgs/w-fdui.png) no-repeat 0 0;
}
.drop-lis div{
    position: absolute;
    top: calc(50% - 40px);
    left: 56px;
    height: 80px;
    width: 80px;
    border: 1px solid #dedede;
}
.lisImg img{
    width: 100%;
}
.drop-listo .drop-lis1{
    width: 180px;
}
.nonw{
    display: none;
}
.drop-move {
    font-size: 0;
}
.drop-move span{
    line-height: 26px;
    width: 100px;
    border: 1px solid #d3d3d3;
    display: flex;
    margin-top: 47px;
    margin-left: 40px;

}
.drop-move span i:nth-of-type(1){
    display: inline-block;
    width: 26px;
    line-height: 26px;
    background: url(../../../assets/imgs/a2.png) no-repeat 5.5px 5.5px ;
}
.drop-move span i:nth-of-type(2){
    display: block;
    width: 46px;
    /* height: 26px; */
    line-height: 27px;
    border-left: 1px solid #d3d3d3;
    border-right: 1px solid #d3d3d3;
    /* background-color: #f0f; */

}
.drop-move span i:nth-of-type(3){
    display: inline-block;
    width: 26px;
    background: url(../../../assets/imgs/a1.png) no-repeat 5.5px 5.5px;
}
.drop-listo div:nth-child(1){
    color: #666;
    font-size: 14px;
}.drop-listo div:nth-child(2){
    font-size: 14px;
    color: #999;
}.drop-listo div:nth-child(3){
    font-size: 14px;
    color: #999;
}.drop-listo div:nth-child(4){
    color: #666;
    font-size: 16px;
}.drop-listo div:nth-child(5){
    font-size: 14px;
    color: #333;
}
.drop-listo div:nth-child(6){
    font-size: 14px;
    color: #498e3d;
}
.drop-listo2{

    line-height: 80px;
    border-bottom: 1px solid #e9e9e9;
    border-left: 1px solid #e9e9e9;
    border-right: 1px solid #e9e9e9;
    text-align: right;
    /* padding-right: 36px; */
    font-size: 18px;
    color: #666;
    /* background-color: #f00; */
}
.drop-listo2 div{
    float: right;
    display: flex;
    /* width: 620px; */
    /* background-color: #00f; */

}
.drop-listo2 div span{
    color: #ff5757;
    font-size: 24px;
    margin-right: 20px;
}
.drop-listo2 div div{
    margin-right: 40px;
}

.clearfix::after{
    content: '';
    height: 0;
    display: block;
    visibility: hidden;
    clear: both;
}
.clearfix{
    *zoom: 1;
}

</style>